<template>
  <div class="wrapper">
    <vue-particles
      class="login-bg"
      color="#ffffff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#ffffff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <div class="top">
      <div class="header">
        <span class="title">驾驶舱</span>
      </div>
    </div>
    <div class="main">
      <a-form-model :model="loginForm" :rules="loginRules" class="login-form" ref="loginForm">
        <a-form-model-item prop="username">
          <a-input v-model="loginForm.username" size="large" autocomplete="new-password">
            <a-icon slot="prefix" type="user" style="color:#fff;" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password v-model="loginForm.password" size="large" autocomplete="new-password">
            <a-icon slot="prefix" type="lock" style="color:#fff;" />
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            size="large"
            class="login-button"
            block
            ghost
            :loading="loginBtn"
            @click.stop.prevent="handleLogin"
            :disabled="loginBtn"
          >登录</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { AESEncrypt } from '@/utils/utils';
export default {
  name: 'Login',
  components: {
  },
  props: {},
  data() {
    return {
      loginBtn: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '账号不能为空' }
        ],
        password: [
          { required: true, message: '密码不能为空' }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loginBtn = true;
          const newPassword = AESEncrypt(this.loginForm.password, 'zhszjjjsc');
          const truePassword = AESEncrypt('LWe6%t$=', 'zhszjjjsc');
          if (this.loginForm.username !== 'admin') {
            this.$message.error('用户名错误');
            this.loginBtn = false;
          } else if (newPassword !== truePassword) {
            this.$message.error('密码错误');
            this.loginBtn = false;
          } else {
            setTimeout(() => {
              localStorage.setItem('zhszjjjsc_username', this.loginForm.username);
              localStorage.setItem('zhszjjjsc_password', AESEncrypt(this.loginForm.password, 'zhszjjjsc'));
              this.loginBtn = false;
              let path = '/';
              if (this.$route.query.redirect) {
                path = this.$route.query.redirect; // 跳到之前的页面
              }
              this.$router.push({
                path: path
              });
            }, 1000);
          }
        }
      });
    }
  },
  created() { },
  mounted() { }
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
  width: 100%;
  .login-bg {
    height: 100%;
    width: 100%;
    background-color: #001033;
    position: absolute;
    overflow: hidden;
  }
  .top {
    position: relative;
    text-align: center;
    padding: 144px 0 40px;
    .header {
      height: 44px;
      line-height: 44px;
      .badge {
        position: absolute;
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        margin-left: -12px;
        margin-top: -10px;
        opacity: 0.8;
      }

      .logo {
        height: 44px;
        vertical-align: top;
        margin-right: 16px;
        border-style: none;
      }

      .title {
        font-size: 22px;
        color: #fff;
        font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont,
          'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
          'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
          'Segoe UI Emoji', 'Segoe UI Symbol';
        font-weight: 600;
        position: relative;
        top: 2px;
      }
    }
  }
  .main {
    min-width: 260px;
    width: 368px;
    margin: 0 auto;
  }
}
</style>
<style>
.has-error .ant-input-affix-wrapper .ant-input,
.has-error .ant-input-affix-wrapper .ant-input:hover {
  background-color: transparent !important;
}
.ant-input-password-icon {
  color: #ffffff !important;
}
</style>
